<template>
  <div class="share">
    <divider>分享这篇内容</divider>
    <swiper height="180px" dots-class="custom-bottom" dots-position="center">
      <swiper-item class="black">
        <div class="share-item" @click="shareClick">
          <i class="icon iconfont icon-weixinhaoyou"></i>
          <span>微信好友</span>
        </div>
        <div class="share-item" @click="shareClick">
          <i class="icon iconfont icon-weixinpengyouquan"></i>
          <span>微信朋友圈</span>
        </div>
        <div class="share-item" @click="shareClick">
          <i class="icon iconfont icon-QQ"></i>
          <span>QQ</span>
        </div>
        <div class="share-item" @click="shareClick">
          <i class="icon iconfont icon-weibo"></i>
          <span>新浪微博</span>
        </div>
        <div class="share-item" @click="shareClick">
          <i class="icon iconfont icon-fuzhi"></i>
          <span>复制链接</span>
        </div>
        <div class="share-item" @click="shareClick">
          <i class="icon iconfont icon-youdaoyunbiji"></i>
          <span>有道云笔记</span>
        </div>
        <div class="share-item" @click="shareClick">
          <i class="icon iconfont icon-yinxiangbiji"></i>
          <span>印象笔记</span>
        </div>
        <div class="share-item" @click="shareClick">
          <i class="icon iconfont icon-tengxunweibo"></i>
          <span>腾讯微博</span>
        </div>
      </swiper-item>
      <swiper-item class="black black2">
        <div class="share-item" @click="shareClick">
          <i class="icon iconfont icon-xinxi"></i>
          <span>信息</span>
        </div>
        <div class="share-item" @click="shareClick">
          <i class="icon iconfont icon-instapaper"></i>
          <span>Instapaper</span>
        </div>
      </swiper-item>
    </swiper>
    <div class="btns">
      <div class="button" @click="collect">{{collectShowText}}</div>
      <div class="button" @click="cancel">取消</div>
    </div>
    <toast v-model="showToast1" type="warn">该功能暂未实现！</toast>
    <toast v-model="showStatus" :text="text"></toast>
  </div>
</template>
<script>
  import {
    Swiper,
    SwiperItem,
    Divider,
    Toast
  } from "vux";
  import {
    mapMutations,
    mapGetters
  } from 'vuex'
  export default {
    props: ["id"],
    data() {
      return {
        showToast1: false,
        showStatus: false,
        text: '操作成功'
      };
    },
    computed: {
      ...mapGetters([
        "collectShowText"
      ])
    },
    created() {
      this.changeCollectStatus(this.id);
    },
    methods: {
      shareClick() {
        this.showToast1 = true;
      },
      cancel() {
        // 点击取消按钮
        this.$emit("cancel");
      },
      collect() {
        // 点击收藏按钮
        const story = JSON.parse(sessionStorage.getItem('currentNewsDetail'));
        this.changeCollectStories(story);
        // 弹出提示框
        this.showStatus = true;
      },
      ...mapMutations({
        changeCollectStories: 'CHANGE_COLLECT_STORIES',
        changeCollectStatus: 'CHANGE_COLLECT_STATUS'
      })

    },
    components: {
      Swiper,
      SwiperItem,
      Divider,
      Toast
    }
  };

</script>
<style lang="less">
  .share {
    .vux-divider {
      margin: 0 !important;
      padding: 15px 0;
      font-size: 13px;
      font-weight: 500;
    }
    .custom-bottom {
      bottom: -7px !important;
    }
    .black {
      width: 100%;
      box-sizing: border-box;
      padding: 0 25px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      &.black2 {
        justify-content: flex-start;
      }
      .share-item {
        width: 25%;
        height: 75px;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #9b9b9b;
        span {
          margin-top: 10px;
          font-size: 12px;
        }
        i {
          display: block;
          width: 50px;
          height: 50px;
          color: #fff;
          border-radius: 50%;
          line-height: 50px;
          font-size: 26px;
          text-align: center;
        }
        .icon-weixinhaoyou {
          background: #64c654;
        }
        .icon-weixinpengyouquan {
          background: #75cd37;
        }
        .icon-QQ {
          background: #286bc4;
        }
        .icon-weibo {
          background: #ec4226;
        }
        .icon-fuzhi {
          background: #dd472c;
        }
        .icon-youdaoyunbiji {
          background: #38a3ea;
        }
        .icon-yinxiangbiji {
          background: #5db346;
        }
        .icon-tengxunweibo {
          background: #3ea1d9;
        }
        .icon-xinxi {
          background: #4fe54e;
        }
        .icon-instapaper {
          background: #6c6c6c;
        }
      }
    }
    .btns {
      box-sizing: border-box;
      width: 100%;
      padding: 0 25px;
      .button {
        width: 100%;
        box-sizing: border-box;
        margin: 16px 0;
        height: 44px;
        line-height: 44px;
        background-color: #fff;
        text-align: center;
        color: #949494;
      }
    }
  }

</style>
